<template>
    <div class="runtime_log_wp">
        <div class="tab_title">
            <span>{{ typeLog }}</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-runtimelog')"></i>
        </div>
        <el-table :data="list" style="width: 755px;border: 1px solid #979ba2;" height="365" highlight-current-row
            size="small" border>
            <el-table-column show-overflow-tooltip prop="type" label="类型" width="100"></el-table-column>
            <el-table-column show-overflow-tooltip prop="time" label="时间(本机)" width="150"></el-table-column>
            <el-table-column show-overflow-tooltip prop="content" label="日志"></el-table-column>
            <el-table-column show-overflow-tooltip prop="user" label="账户" width="100"></el-table-column>
        </el-table>
        <div class="btns_display btns">
            <select v-model="listType">
                <option value="全部">全部</option>
                <option value="系统">系统</option>
                <option value="跟单">跟单</option>
                <option value="普通单">普通单</option>
                <option value="条件单">条件单</option>
                <option value="损盈单">损盈单</option>
                <option value="操作">操作</option>
            </select>
            <div class="btns_display" v-show="typeLog == '运行日志'">
                <span @click="typeLog = '历史日志'">查看历史日志</span>
                <span @click="ipcRenderer.send('close-runtimelog')">关闭</span>
            </div>
            <div class="btns_display" v-show="typeLog == '历史日志'">
                <input type="date" v-model="timeSelect">
                <span @click="typeLog = '运行日志'">返回</span>
            </div>
        </div>
    </div>
</template>

<script setup>
const { ref, onMounted, watch } = require('vue');
const { ipcRenderer } = require('electron');
import moment from 'moment'
const logHandler = require('@/utils/logHandler.js');
// import { ElMessage } from 'element-plus';

const typeLog = ref('运行日志')
const list = ref([])
const listType = ref('全部')
const timeSelect = ref(moment().format('YYYY-MM-DD'))
onMounted(() => {
    getList(new Date())
})

watch([timeSelect, listType], ([newVal]) => {
    getList(newVal)
})
function getList(time) {
    let str = logHandler.readLogs(time)
    let arr = str ? str.split(';;') : []
    arr.pop()
    let arrList = arr.map(item => {
        let arr = item ? item.split('||') : []
        let obj = {
            type: arr[0] != 0 ? arr[0] : '',
            time: arr[1] != 0 ? moment(arr[1]).format('HH:mm:ss') : '',
            content: arr[2] != 0 ? arr[2] : '',
            user: arr[3] != 0 ? arr[3] : '',
        }
        if (listType.value == '全部') {
            return obj
        }
        if (listType.value == obj.type) {
            return obj
        }
    })
    list.value = arrList.filter(item => item)
}
</script>

<style scoped lang="less">
.runtime_log_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 425px;
    width: 625px;

    .tab_title {
        background-color: #ebf6f9;
        color: #919191;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    :deep(.el-table tr) {
        background-color: #f0f0f0;
    }

    :deep(.el-table th.el-table__cell) {
        padding: 0;
        font-size: 12px;
        color: #000;
        font-weight: normal;
        font-family: '宋体';
        border-color: #a0a0a0;
        background-color: #f0f0f0;
    }

    :deep(.el-table td.el-table__cell) {
        background-color: #ffffff;
        padding: 0;
        color: #000;
    }

    :deep(.el-table--enable-row-transition .current-row td.el-table__cell) {
        background-color: #0078d7;
        color: #fff
    }

    .btns_display {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .btns {
        padding: 5px 10px 0;

        select {
            font-size: 12px;
            width: 70px;
            height: 22px;
            margin-right: 20px;
        }

        div {
            flex: 1;

            span {
                display: inline-block;
                border: 1px solid #d0d0d0;
                border-radius: 3px;
                background: #fdfdfd;
                line-height: 20px;
                padding: 0 20px;
                margin-left: 10px;
            }

            input {
                font-size: 12px;
                width: 150px;
            }
        }

    }

}
</style>
